<script setup lang="ts">
import { onMounted, ref } from 'vue';

import { message, Skeleton } from 'ant-design-vue';

import { useVbenForm } from '#/adapter/form';
import { getMaliTemplate, putMaliTemplate } from '#/api/admin/mail';

const loading = ref<boolean>(true);
async function onSubmit(values: any) {
  values.template_key = 'verification_code';
  const { msg } = await putMaliTemplate(values);
  message.success(msg);
}

const [Form, formApi] = useVbenForm({
  handleSubmit: onSubmit,
  layout: 'vertical',
  schema: [
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入',
      },
      fieldName: 'subject',
      label: '邮件标题',
    },
    {
      component: 'Editor',
      componentProps: {
        placeholder: '请输入',
      },
      fieldName: 'template',
      label: '邮件模版',
    },
  ],
});

const onInfo = async () => {
  const { data } = await getMaliTemplate({
    template_key: 'verification_code',
  });

  if (data.config) {
    formApi.setValues(data.config);
  }

  loading.value = false;
};

onMounted(async () => {
  await onInfo();
});
</script>

<template>
  <Skeleton :loading="loading">
    <Form />
  </Skeleton>
</template>
